<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx小练习</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../React-js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转换为js -->
    <script type="text/javascript" src="../React-js/babel.min.js"></script>

    <script type="text/babel">
      /***
       * *！！！！
       * * 一定要区分： 【 JS语句(代码) 】 与 【 JS表达式 】
       * *      1.表达式： 一个表达式会产生一个值，可以放在任何一个需要值的地方
       * *             下面的都是是表达式
       * *               (1). a
       * *               (2). a+b
       * *               (3). demo(1) 函数调用表达式  return
       * *               (4). arr.map
       * *               (5). function(){}
       * *
       * *-    验证方法:
       * *-    const x = JS表达式 === <> === x 接受到值就是JS表达式
       *
       * *     2.语句(代码)
       * *          下面的都是语句(代码)
       * *             (1). if(){}
       * *             (2). for(){}
       * *             (3). switch(){ case:xxx }
       *
       *
       ***/
      // 模拟数据
      const data = ['Angular', 'React', 'Vue'];
      // *1.创建虚拟DOM
      const vDOM = (
        <div>
          <h1>前端框架列表</h1>
          <ul>
            {data.map((item, index) => {
              return <li key={index}>{item}</li>;
            })}
          </ul>
        </div>
      );
      // *2.渲染虚拟DOM到页面
      ReactDOM.render(vDOM, document.getElementById('test')); //虚拟DOM  容器
    </script>
  </body>
</html>
